<template>
  <!-- 传统 -->
  <div id="traditionQualityControl">
    <el-row>
      <el-col :span="6" class="box-card">
        <!-- 查询 -->
        <div class="box-card-item" style="height:40%">
          <el-form
            :model="basicData.model"
            ref="basicForm"
            size="small"
            :rules="basicDataRules"
            label-width="125px"
          >
            <el-row>
              <el-form-item label="质控类别:" prop="qualityControlType.key">
                <el-select
                  size="mini"
                  v-model="basicData.model.qualityControlType.key"
                  placeholder="选择"
                >
                  <el-option
                    v-for="(item, key, index) in dicts.QUALITY_CONTROL_TYPE"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="项目指标:" prop="code">
                <el-input v-if="!basicData.model.qualityControlType.key" />
                <el-select size="mini" v-model="basicData.model.code" placeholder="选择" v-else>
                  <el-option
                    v-for="(item, key, index) in basicData.model.qualityControlType.key == 'MSMS' ? dicts.INDICATOR_NAME : dicts.EXPERIMENT_CODE"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="质控批号:" prop="qualityControl">
                <el-input v-model="basicData.model.qualityControl" />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="开始日期:" prop="experimentTime.start">
                <el-date-picker
                  size="mini"
                  :format="TimeFormat"
                  @focus="basicData.model.experimentTime.start = ''"
                  v-model="basicData.model.experimentTime.start"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="结束日期:" prop="experimentTime.end">
                <el-date-picker
                  size="mini"
                  :format="TimeFormat"
                  @focus="basicData.model.experimentTime.end = ''"
                  v-model="basicData.model.experimentTime.end"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="质控范围:" prop="qualityScope.key">
                <el-select size="mini" v-model="basicData.model.qualityScope.key" placeholder="选择">
                  <el-option
                    v-for="(item, key, index) in dicts.QUALITY_SCOPE"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="图类型:" prop="pictureType.key">
                <el-select size="mini" v-model="basicData.model.pictureType.key" placeholder="选择">
                  <el-option
                    v-for="(item, key, index) in dicts.PICTURE_TYPE"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-row>
          </el-form>
          <div style="padding-top:25px;width:100%;display:flex;justify-content:center">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="queryData">查询</el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-pie-chart"
              @click="clickCharButton"
            >图形</el-button>
          </div>
        </div>
        <!-- 批号 -->
        <div class="box-card-item zk" style="margin-bottom:0;">
          <span class="title">质控品</span>
          <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            ref="charsTree"
            @check-change="clickTreeData"
            default-expand-all
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="18" style="height:100%;padding-left:15px;" v-if="chartsData.length > 0">
        <el-card class="box-card" style="height:66vh">
          <div id="zkCharts" style="height:60vh;width:100%" />
        </el-card>
        <div>222</div>
      </el-col>
      <el-col :span="18" class="no-image-box" v-else>
        <div class="no-image">
          <img src="../../../../../image/nodata.png" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import QualityManageApi from "@/api/QualityManage.js";
import { initDicts } from "@/utils/commons";
import echarts from "echarts";

export default {
  data() {
    return {
      // 查询数据
      basicData: {
        current: 1,
        map: {},
        model: {
          code: "",
          experimentTime: {
            end: "",
            start: ""
          },
          pictureType: {
            data: "",
            key: "pictureZ"
          },
          qualityControl: "",
          qualityControlType: {
            data: "",
            key: "GSP"
          },
          qualityScope: {
            data: "",
            key: "high"
          }
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 校验
      basicDataRules: {
        "qualityControlType.key": [
          { required: true, message: "  ", trigger: "change" }
        ],
        code: [{ required: true, message: "  ", trigger: "change" }],
        "experimentTime.start": [
          { required: true, message: "  ", trigger: "change" }
        ],
        "qualityScope.key": [
          { required: true, message: "  ", trigger: "change" }
        ],
        "pictureType.key": [
          { required: true, message: "  ", trigger: "change" }
        ]
      },
      // 批号数据
      treeData: [],
      // tree规则
      defaultProps: {
        children: "children",
        label: "qualityText"
      },
      // 字典
      dicts: {
        QUALITY_CONTROL_TYPE: {}, //实验项目
        PICTURE_TYPE: {}, //图类型
        INDICATOR_NAME: {}, //指标名称
        EXPERIMENT_CODE: {}, //项目名称
        QUALITY_SCOPE: {} //质控范围
      },
      // 采血日期输入格式
      TimeFormat: "MMdd",
      // 获取图表数据
      getPictureData: {
        code: "",
        list: [
          {
            code: "",
            hospitalName: "",
            pictureType: {
              data: "",
              key: ""
            },
            qualityControl: "",
            qualityControlType: "",
            qualityScope: {
              data: "",
              key: ""
            },
            qualityText: ""
          }
        ],
        pictureType: {
          data: "",
          key: ""
        },
        qualityControl: "",
        qualityScope: {
          data: "",
          key: ""
        }
      },
      chartsData: []
      // [
      //   {
      //     count: { cv: "7.719%", sd: "1.230", x: "15.934" },
      //     data: [
      //       {
      //         boardhole: "1-A07",
      //         expbatch: "210113151945TSH",
      //         id: "babec179-5573-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-13",
      //         qc: 0,
      //         value: 15.49,
      //         zvalue: "5.058"
      //       },
      //       {
      //         boardhole: "2-A07",
      //         expbatch: "210113151945TSH",
      //         id: "bac025aa-5573-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-13",
      //         qc: 0,
      //         value: 15.95,
      //         zvalue: "5.355"
      //       },
      //       {
      //         boardhole: "3-A07",
      //         expbatch: "210113151945TSH",
      //         id: "bac11184-5573-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-13",
      //         qc: 0,
      //         value: 16.43,
      //         zvalue: "5.665"
      //       },
      //       {
      //         boardhole: "1-A07",
      //         expbatch: "210114091339TSH",
      //         id: "39d025ac-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 15.6,
      //         zvalue: "5.129"
      //       },
      //       {
      //         boardhole: "2-A07",
      //         expbatch: "210114091339TSH",
      //         id: "39d32597-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 14.06,
      //         zvalue: "4.135"
      //       },
      //       {
      //         boardhole: "3-A07",
      //         expbatch: "210114091339TSH",
      //         id: "39d4421c-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 15.92,
      //         zvalue: "5.335"
      //       },
      //       {
      //         boardhole: "4-A07",
      //         expbatch: "210114091339TSH",
      //         id: "39d5267f-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 14.26,
      //         zvalue: "4.265"
      //       },
      //       {
      //         boardhole: "5-A07",
      //         expbatch: "210114091339TSH",
      //         id: "39d65386-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 17.36,
      //         zvalue: "6.265"
      //       },
      //       {
      //         boardhole: "1-A07",
      //         expbatch: "210115164852TSH",
      //         id: "4d4c8433-5921-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-18",
      //         qc: 0,
      //         value: 18.65,
      //         zvalue: "7.097"
      //       },
      //       {
      //         boardhole: "1-A07",
      //         expbatch: "210120143943TSH",
      //         id: "6bda5872-5aea-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-20",
      //         qc: 0,
      //         value: 15.39,
      //         zvalue: "4.994"
      //       },
      //       {
      //         boardhole: "2-A07",
      //         expbatch: "210120143943TSH",
      //         id: "6bdec601-5aea-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-20",
      //         qc: 0,
      //         value: 15.91,
      //         zvalue: "5.329"
      //       },
      //       {
      //         boardhole: "3-A07",
      //         expbatch: "210120143943TSH",
      //         id: "6be16b80-5aea-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-20",
      //         qc: 0,
      //         value: 16.19,
      //         zvalue: "5.510"
      //       }
      //     ],
      //     qcbatch: "682223",
      //     qctype: "1",
      //     reg: { cv: "10.06%", sd: "1.55", x: "15.4" }
      //   },
      //   {
      //     count: { cv: "8.119%", sd: "5.113", x: "62.975" },
      //     data: [
      //       {
      //         boardhole: "1-A08",
      //         expbatch: "210113151945TSH",
      //         id: "babede2a-5573-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-13",
      //         qc: 0,
      //         value: 61.12,
      //         zvalue: "4.811"
      //       },
      //       {
      //         boardhole: "2-A08",
      //         expbatch: "210113151945TSH",
      //         id: "bac0280a-5573-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-13",
      //         qc: 0,
      //         value: 68.74,
      //         zvalue: "6.030"
      //       },
      //       {
      //         boardhole: "3-A08",
      //         expbatch: "210113151945TSH",
      //         id: "bac1130f-5573-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-13",
      //         qc: 0,
      //         value: 60.91,
      //         zvalue: "4.778"
      //       },
      //       {
      //         boardhole: "1-A08",
      //         expbatch: "210114091339TSH",
      //         id: "39d0f2b5-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 57.72,
      //         zvalue: "4.267"
      //       },
      //       {
      //         boardhole: "2-A08",
      //         expbatch: "210114091339TSH",
      //         id: "39d327d1-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 57.29,
      //         zvalue: "4.198"
      //       },
      //       {
      //         boardhole: "3-A08",
      //         expbatch: "210114091339TSH",
      //         id: "39d44407-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 65.1,
      //         zvalue: "5.448"
      //       },
      //       {
      //         boardhole: "4-A08",
      //         expbatch: "210114091339TSH",
      //         id: "39d52822-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 63.53,
      //         zvalue: "5.197"
      //       },
      //       {
      //         boardhole: "5-A08",
      //         expbatch: "210114091339TSH",
      //         id: "39d65573-5617-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-14",
      //         qc: 0,
      //         value: 56.88,
      //         zvalue: "4.133"
      //       },
      //       {
      //         boardhole: "1-A08",
      //         expbatch: "210115164852TSH",
      //         id: "4d4ca220-5921-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-18",
      //         qc: 0,
      //         value: 62.97,
      //         zvalue: "5.107"
      //       },
      //       {
      //         boardhole: "1-A08",
      //         expbatch: "210120143943TSH",
      //         id: "6bdaafbf-5aea-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-20",
      //         qc: 0,
      //         value: 71.49,
      //         zvalue: "6.470"
      //       },
      //       {
      //         boardhole: "2-A08",
      //         expbatch: "210120143943TSH",
      //         id: "6bdec909-5aea-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-20",
      //         qc: 0,
      //         value: 59.31,
      //         zvalue: "4.522"
      //       },
      //       {
      //         boardhole: "3-A08",
      //         expbatch: "210120143943TSH",
      //         id: "6be16d76-5aea-11eb-8849-6c92bf613734",
      //         labdate: "2021-01-20",
      //         qc: 0,
      //         value: 70.64,
      //         zvalue: "6.334"
      //       }
      //     ],
      //     qcbatch: "682223",
      //     qctype: "3",
      //     reg: { cv: "10.03%", sd: "6.25", x: "62.3" }
      //   }
      // ]
    };
  },
  mounted() {
    initDicts(
      [
        "QUALITY_CONTROL_TYPE",
        "PICTURE_TYPE",
        "QUALITY_SCOPE",
        "EXPERIMENT_CODE",
        "INDICATOR_NAME"
      ],
      this.dicts
    );
  },
  methods: {
    // 查询
    queryData() {
      this.$refs["basicForm"].validate(valid => {
        if (valid) {
          this.getList(this.basicData);
        }
      });
    },
    // 获取数据
    getList(data) {
      QualityManageApi.traditionQualityControl.page(data).then(res => {
        this.treeData = res.data.data;
      });
    },
    // 开始时间
    changeTimeStart(v, type) {
      this.basicData.model.experimentTime.start = v;
      if (this.basicData.model.experimentTime.start) {
        this.TimeFormat = "yyyy-MM-dd";
      } else {
        this.TimeFormat = "MMdd";
      }
    },
    // 结束时间
    changeTimeEnd(v, type) {
      this.basicData.model.experimentTime.end = v;
      if (this.basicData.model.experimentTime.end) {
        this.TimeFormat = "yyyy-MM-dd";
      } else {
        this.TimeFormat = "MMdd";
      }
    },
    // 获取选择的质控品
    clickTreeData() {
      this.getPictureData.list = this.$refs.charsTree.getCheckedNodes(true);
      console.log(this.getPictureData.list);
    },
    // 点击图形按钮
    clickCharButton() {
      if (this.treeData.length == 0) {
        this.$message.error("未选中一批质控品");
        return;
      }
      this.getPictureData.pictureType = this.basicData.model.pictureType;
      this.getPictureData.qualityScope = this.basicData.model.qualityScope;
      console.log(this.getPictureData);
      this.getPicture(this.getPictureData);
    },
    // 获取图表
    getPicture(data) {
      QualityManageApi.traditionQualityControl.getPicture(data).then(res => {
        console.log(res.data.data);
        if (res.data.data) {
          this.chartsData = res.data.data;
          this.initChart();
        }
      });
    },
    // 图表
    initChart() {
      this.chart = echarts.init(document.getElementById("zkCharts"));
      let titleData = [];
      for (let index = 0; index < this.chartsData[0].data.length; index++) {
        titleData[index] = "";
      }
      let dData = [];
      let hData = [];
      this.chartsData[0].data.forEach(item => {
        let dd = Number(item.value) - Number(this.chartsData[0].count.x);
        dData.push(dd.toFixed(2));
      });
      this.chartsData[1].data.forEach(item => {
        let dd = Number(item.zvalue) - Number(this.chartsData[1].count.sd);
        hData.push(dd.toFixed(2));
      });

      var chartsData = this.chartsData;

      let option = {
        title: {
          text: "质量控制图"
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params, ticket, callback) {
            return (
              params[0].seriesName +
              "<br />" +
              chartsData[0].data[params[0].dataIndex].expbatch +
              "/" +
              chartsData[0].data[params[0].dataIndex].boardhole +
              "<br />" +
              "值：" +
              chartsData[0].data[params[0].dataIndex].value +
              "<div style='height:1px;background:#fff;margin:5x 0'></div>" +
              params[1].seriesName +
              "<br />" +
              chartsData[1].data[params[1].dataIndex].expbatch +
              "/" +
              chartsData[1].data[params[1].dataIndex].boardhole +
              "<br />" +
              "值：" +
              chartsData[0].data[params[0].dataIndex].value
            );
          }
        },
        legend: {
          right: "3%",
          data: [
            `${this.chartsData[0].qcbatch}低质控`,
            `${this.chartsData[1].qcbatch}高质控`
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: titleData
        },
        yAxis: {
          type: "value",
          max: Number(this.chartsData[1].count.sd).toFixed(),
          min: (-Number(this.chartsData[1].count.sd)).toFixed(),
          maxInterval: 1,
          axisLabel: {
            fontWeight: "bolder",
            textStyle: {
              color: function(value, index) {
                let color = "#fff";
                if (value == 1) {
                  color = "#ee5767";
                } else if (value == 2) {
                  color = "#fca603";
                } else if (value == 3) {
                  color = "#2b97f3";
                } else if (value == 0) {
                  color = "#000";
                } else if (value == -1) {
                  color = "#2b97f3";
                } else if (value == -2) {
                  color = "#fca603";
                } else if (value == -3) {
                  color = "#ee5767";
                } else {
                  color = "#fff";
                }

                return color;
              }
            },
            formatter: function(val, index) {
              let text = "";
              if (val == 1) {
                text = "+1SD";
              } else if (val == 2) {
                text = "+2SD";
              } else if (val == 3) {
                text = "+3SD";
              } else if (val == 0) {
                text = "X";
              } else if (val == -1) {
                text = "-1SD";
              } else if (val == -2) {
                text = "-2SD";
              } else if (val == -3) {
                text = "-3SD";
              }
              return text;
            }
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              width: 2,
              color: [
                "#fff",
                "#fff",
                "#ee5767",
                "#fca603",
                "#2b97f3",
                "#000",
                "#2b97f3",
                "#fca603",
                "#ee5767",
                "#fff",
                "#fff"
              ]
            }
          }
        },
        series: [
          {
            name: `${this.chartsData[0].qcbatch}低质控`,
            type: "line",
            data: dData
          },
          {
            name: `${this.chartsData[1].qcbatch}高质控`,
            type: "line",
            data: hData
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  watch: {
    "basicData.model.experimentTime.start": function(v) {
      this.changeTimeStart(v, "b");
    },
    "basicData.model.experimentTime.end": function(v) {
      this.changeTimeEnd(v, "b");
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#traditionQualityControl {
  height: 100%;
  padding: 1vw;
  overflow: auto;
  .el-row {
    height: 100%;
  }
  .el-form-item {
    display: flex;
    margin-bottom: 0px !important;
  }
  @media screen and (max-width: 1750px) {
    .box-card-item {
      height: 42% !important;
    }
    .zk {
      height: 56% !important;
    }
  }

  @media screen and (max-width: 1550px) {
    .el-form-item {
      margin-bottom: -10px !important;
    }
    .box-card-item {
      height: 46% !important;
    }
    .zk {
      height: 52% !important;
    }
  }
  @media screen and (max-width: 1450px) {
    .el-form-item {
      margin-bottom: -10px !important;
    }
    .box-card-item {
      height: 55% !important;
    }
    .zk {
      height: 43% !important;
    }
  }

  @media screen and (max-width: 1250px) {
    .el-form-item {
      margin-bottom: -10px !important;
    }
    .box-card-item {
      height: 55% !important;
    }
    .zk {
      height: 43% !important;
    }
  }
  .el-form-item__content,
  .el-date-editor,
  .el-select,
  .el-textarea {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .box-card {
    height: 100%;
    .box-card-item {
      height: 48%;
      overflow: auto;
      background: #fff;
      margin-bottom: 1.5vh;
      padding: 1.5vh 1.5vh 1.5vh 0;
      border-right: 0.5vw solid #f1f1f1;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      .title {
        font-size: 2vh;
        font-weight: bold;
        margin-left: 0.5vw;
        margin-bottom: 0.5vw;
        display: block;
      }
    }
    .zk {
      height: 58%;
    }
  }
  .no-image-box {
    padding-left: 15px;
    height: 100%;
    background: #eef3fc;
    .no-image {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
